<div class="col-md-12">
    <div class="box grid-box">
        <div class="box-header with-border">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-2">
                        <div class="form-group">
                            <select type="password" class="form-control" name="stuffId" id="stuff">
                                <option value="">请选择员工</option>
                                @foreach($data as $value)
                                    <option value="{{ $value['user_id'] }}">{{ $value['name'] }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
                                </div>
                                <input type="text" class="form-control datepicker" name="date" readonly
                                       value="{{ date('Y') }}"/>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label for="exampleInputPassword1"></label>
                            <button class="btn btn-primary search">搜索</button>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" style="font-size:20px;font-weight:500">资料</div>
                    <div class="row">
                        <div class="col-md-2">
                            <div class="panel-body">
                                员工姓名: <span class="name"></span>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="panel-body">
                                联系电话: <span class="mobile"></span>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="panel-body">
                                年龄: <span class="age"></span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="panel-body">
                                身份证号: <span class="id_number"></span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="panel-body">
                                居住地址: <span class="address"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" style="font-size:20px;font-weight:500">概况</div>
                    <div class="row">
                        <div class="col-md-2">
                            <div class="panel-body">
                                入职时间: <span class="service_date"></span>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="panel-body">
                                工龄(月): <span class="work_age"></span>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="panel-body">
                                总签单数: <span class="sign_num"></span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2">
                            <div class="panel-body">
                                总收入: <span class="total_income"></span>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="panel-body">
                                客户支出: <span class="customer_expenses"></span>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="panel-body">
                                工资支出: <span class="wages"></span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2">
                            <div class="panel-body">
                                创造产值: <span class="make_money"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" style="font-size:20px;font-weight:500">详情</div>
                    <div class="row">
                        <div class="col-md-12">
                            <table class="table table-striped">
                                <thead style="text-align:center">
                                <tr>
                                    <th>年月</th>
                                    <th>签单</th>
                                    <th>收入</th>
                                    <th>支出</th>
                                    <th>工资</th>
                                    <th>创造产值</th>
                                </tr>
                                </thead>
                                <tbody class="self-list">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" name="_token" value="{{ csrf_token() }}"/>
<script>
    $(document).ready(function () {
        $.fn.datepicker.dates['zh-CN'] = {
            days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
            daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
            daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
            months: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
            monthsShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
            today: "今日",
            suffix: [],
            meridiem: []
        };

        $('.datepicker').datepicker({
            format: 'yyyy',
            autoclose: true,
            startView: 2, // 视图开始于年份视图
            minViewMode: 2, // 设置最小视图模式为年份
            maxViewMode: 2, // 设置最大视图模式为年份
            'language': 'zh-CN',
        });
    });

    $('.search').click(function () {
        ajaxPostFunc('/admin/ajax/stuffReportForms', {
            id: $("select[name='stuffId']").val(),
            date: $("input[name='date']").val(),
            _token: $.admin.token
        }, {}, res => {
            $('.name').html(res.name);
            $('.mobile').html(res.mobile);
            $('.age').html(res.age);
            $('.id_number').html(res.id_number);
            $('.address').html(res.address);
            $('.service_date').html(res.service_date);
            $('.work_age').html(res.work_age);
            $('.sign_num').html(res.sign_num);
            $('.total_income').html(res.total_income);
            $('.customer_expenses').html(res.customer_expenses);
            $('.wages').html(res.wages);
            $('.make_money').html(res.make_money);
            $('tbody').empty();
            if (res.list.length > 0) {
                let myList;
                $.each(res.list, function (index, value) {
                    if (value.total_contracted_count === null) total_contracted_count = 0;
                    else total_contracted_count = value.total_contracted_count;
                    if (value.total_income === null) total_income = 0;
                    else total_income = value.total_income;
                    if (value.total_expense === null) total_expense = 0;
                    else total_expense = value.total_expense;
                    if (value.total_wages === null) total_wages = 0;
                    else total_wages = value.total_wages;
                    if (value.total_output === null) total_output = 0;
                    else total_output = value.total_output;
                    myList += '<tr>' +
                        '<td>' + value.month + '</td>' +
                        '<td>' + total_contracted_count + '</td>' +
                        '<td>' + total_income + '</td>' +
                        '<td>' + total_expense + '</td>' +
                        '<td>' + total_wages + '</td>' +
                        '<td>' + total_output + '</td>' +
                        '</tr>'
                });
                $("tbody").empty().append(myList);
            }
        });
    });
</script>
